<template>
    <transition :name="tName">
        <v-touch v-on:swiperight="" class="content-gray">
            <div class="useSet-title">
                <span class="mui-icon mui-icon-back" @click="backRoute()"></span>
                <span>{{ $t('m.my.set.listTitle') }}</span>
                <span></span>
            </div>
            <div class="content-important">
                <div>
                    <span>Touch ID</span>
                    <span class="switch-location" @click="touchID()">
                        <div class="ui-switch switch-size">
                            <input type="checkbox" checked v-if="touch_v==1">
                            <input type="checkbox" v-else>
                        </div>
                    </span>
                </div>
                <!--TODO-->
                <!--<div>-->
                    <!--<span>隐私模式</span>-->
                    <!--<span class="switch-location" @click="privateMode()">-->
                        <!--<div class="ui-switch switch-size">-->
                            <!--<input type="checkbox" checked v-if="private_v==1">-->
                            <!--<input type="checkbox" v-else>-->
                        <!--</div>-->
                    <!--</span>-->
                <!--</div>-->
            </div>
            <!--TODO-->
            <!--<div class="use-set-hint">开启隐私模式后钱包的资产和金额都将会隐藏</div>-->
            <div class="content-modification" style="height: 2rem;">
                <div @click="myChangeRoute('/language')">
                    <span>{{ $t('m.my.set.prompt[0]') }}</span>
                    <span>{{ language_v }}<img src="@/assets/img/rightwhite.png" alt=""></span>
                </div>
                <div @click="myChangeRoute('/currency')">
                    <span>{{ $t('m.my.set.prompt[1]') }}</span>
                    <span>{{ currency_v }}<img src="@/assets/img/rightwhite.png" alt=""></span>
                </div>
            </div>
        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */
    export default {
        name: 'my_set',
        created() {
            this.initData();
        },
        mounted() {
        },
        data() {
            return {
                touch_v: "",
                private_v: "",
                language_v: "",
                currency_v: "",
                tName: "slide-right"
            }
        },
        methods: {
            touchID: function () {
                if (this.touch_v == 1) {
                    this.touch_v = 0
                } else {
                    this.touch_v = 1
                }
                localStorage.setItem("touchId", this.touch_v);
            },
            privateMode: function () {
                if (this.private_v == 1) {
                    this.private_v = 0
                } else {
                    this.private_v = 1
                }
                localStorage.setItem("privateMode", this.private_v);
            },
            initData: function () {
                this.touch_v = localStorage.getItem("touchId") ? localStorage.getItem("touchId") : 0;
                this.private_v = localStorage.getItem("privateMode") ? localStorage.getItem("privateMode") : 0;
                let language = localStorage.getItem("lang") ? localStorage.getItem("lang") : "en-US";
                switch (language) {
                    case 'zh-CN':
                        this.language_v = "简体中文";
                        break;
                    case 'en-US':
                        this.language_v = "English";
                        break;
                }
                this.currency_v = localStorage.getItem("currency") ? localStorage.getItem("currency") : "CNY";
            },
            myChangeRoute: function (path, v = {}) {
                // this.$store.dispatch('aTransitionName', {transactionList: "none"})
                this.tName = "none";
                setTimeout(() => {
                    this.changeRoute(path, v)
                }, 50);
            }
        }
    }
</script>
<style scoped>
    @import "../../assets/css/useSet.css";
    @import "../../assets/css/switch.css";

    .content-gray {
        font-family: sans-serif;
    }
</style>